<template>
  <div>
      <template v-if='sty=="0"'>
        <button class="dbutton" :class="{disabled: !this.canClick}" @click="countDown">{{content}}</button>
      </template>
      <template v-else>
        <button class="dbutton2" :class="{disabled: !this.canClick}" @click="countDown">{{content}}</button>
      </template>
  </div>
</template>
<script>
export default {
  name: "bButton",
  props: {
    // content: {
    //   type: String,
    //   default: "获取验证码"
    // },
    // totalTime: {
    //   type: Number,
    //   default: 60
    // }
    sty:{
      type:String,
      default:'0'
    }
  },
  data() {
    return {
      canClick: true,
      content:"获取验证码",
      totalTime:60
    };
  },
  methods: {
    countDown() {
      if (!this.canClick) return; //改动的是这两行代码
      this.canClick = false;
      this.content = this.totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.content = "重新发送验证码";
          this.totalTime = 10;
          this.canClick = true; //这里重新开启
        }
      }, 1000);
      this.$emit('obtain')
    }
  }
};
</script>
<style lang="less" scoped>
.dbutton {
  width: 2.16rem;
  height: 0.9rem;
  line-height: .9rem;
  text-align: center;
  color: #fff;
  background: #FAB52F;
  font-size: .28rem;
}
.dbutton2{
  width: 1.8rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
  background: linear-gradient(0deg, #6FC434 , #A8E23B);
  color:#fff;
  font-size: .28rem;
  border-radius: .05rem;
}
</style>
